<template>
  <div class="container">
    <!-- 搜索表单 -->
    <el-form ref="searchForm">
      <el-row type="flex" justify="space-between" style="width: 100%">
        <el-col :span="14" id="input_catalogue">
          <el-row type="flex" style="width: 100%">
            <el-col :span="6">
              <el-form-item label="目录名称">
                <!-- <span id="span_catalogue">目录名称</span> -->
                <el-input v-model="query.directoryName" maxlength="5" style="width: 180px" id="i_catalogue"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="13">
              <el-row type="flex">
                <el-col :span="10">
                  <el-form-item label="状态">
                  <el-select maxlength="5" v-model="query.state" tyle="width: 180px;" id="i_catalogue">
                    <el-option
                      v-for="item in stateSearch"
                      :key="item.value"
                      :label="item.stateName"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                </el-col>
                <el-col :span="10" style="margin-left:10px">
                  <el-form-item>
                    <el-button @click="empty">清除</el-button>
                  <el-button type="primary" @click="searchClick">搜索</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
        <!-- <el-col :span="6">

            </el-col> -->
        <!-- <el-col :span="2">
            </el-col>
            <el-col :span="8">
            </el-col> -->
        <el-col :span="2">
          <el-row type="flex" justify="end">
            <el-button type="success" @click="directorysAddFn">新增目录</el-button>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <!-- 数据记录 -->
    <el-alert
      v-if="alertText !== ''"
      :title="alertText"
      type="info"
      class="alert"
      :closable="false"
      show-icon
    ></el-alert>
    <!-- 数据表格 -->
    <el-table :data="formData" style="width: 100%">
      <el-table-column type="index" label="序号" width="180"> </el-table-column>
      <el-table-column prop="subjectName" label="所属学科" width="180"> </el-table-column>
      <el-table-column prop="directoryName" label="目录名称"> </el-table-column>
      <el-table-column prop="username" label="创建者"> </el-table-column>
      <el-table-column prop="addDate" label="创建日期">
        <template v-slot="scope">
          <span>{{ formatTime(scope.row.addDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="totals" label="面试题数量"> </el-table-column>
      <el-table-column prop="state" label="状态">
        <template v-slot="scope">
          <span>{{ getChineseStateFn(scope.row.state) }}</span>
        </template>
      </el-table-column>
      <el-table-column>
        <template v-slot="scope">
          <el-button
            v-if="scope.row.state == 0"
            @click="
              scope.row.state = 1
              forbiddenClick(scope.row.state)
            "
            type="text"
            size="small"
            >禁用</el-button
          >
          <el-button
            v-else
            @click="
              scope.row.state = 0
              forbiddenClick(scope.row.state)
            "
            type="text"
            size="small"
            >启用</el-button
          >
          <el-button v-if="scope.row.state == 0" type="text" size="small" @click="edit(scope.row.id)" disabled
            >修改</el-button
          >
          <el-button v-else type="text" size="small" @click="edit(scope.row.id)">修改</el-button>
          <el-button v-if="scope.row.state == 0" type="text" size="small" @click="catalogDelete(scope.row.id)" disabled
            >删除</el-button
          >
          <el-button v-else type="text" size="small" @click="catalogDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <el-pagination
      style="margin-top: 20px"
      :current-page="query.page"
      :page-sizes="[10, 15, 20, 25]"
      :page-size="query.pagesize"
      background
      layout="total, sizes, prev, pager, next"
      :total="counts"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 添加目录数据-弹框+表单 -->
    <el-dialog :title="isEdit ? '修改目录' : '新增目录'" :visible.sync="showDialog">
      <directorys-add
        :show-dialog.sync="showDialog"
        :form-data="formData"
        :subject-data="subjectData"
        @enterEV="addFn"
        ref="DirDialog"
      />
    </el-dialog>
  </div>
</template>

<script>
import { list, add, detail, update, remove } from '@/api/hmmm/directorys.js'
import { list as subjectList } from '@/api/hmmm/subjects.js'
import catalogueState from '@/api/hmmm/constant/directorys.js'
import dayjs from 'dayjs'
import DirectorysAdd from '@/module-hmmm/components/directorys-add.vue'
export default {
  data () {
    return {
      input_catalog: '',
      formData: [], // 目录列表数据
      subjectData: [], // 学科列表数据
      query: {
        // 查询参数
        directoryName: '', // 用于搜索查询-目录名称
        page: 1, // 当前页面(页码)
        pagesize: 10, // 页面显示的条数
        state: null // 用于搜索查询-状态
      },
      counts: null, // 当前页面数据的总个数
      alertText: '', // 显示剩余数据数量
      showDialog: false, // 控制新增目录弹框的显示与隐藏
      isEdit: false, // 判断弹框是编辑状态还是添加状态(ture为编辑状态)
      clickId: '', // 点击当先数据的id
      forbidden: false, // 禁用-启用-按钮-控制
      stateSearch: [
        {
          value: 0,
          stateName: '已启用'
        },
        {
          value: 1,
          stateName: '已禁用'
        }
      ]
    }
  },
  components: {
    DirectorysAdd
  },
  created () {
    // 获取目录列表数据
    this.getCataLogueListFn()
    // 获取学科列表数据
    this.getSubjectListFn()
  },
  methods: {
    // 请求-学科列表数据
    async getSubjectListFn () {
      const res = await subjectList()
      this.subjectData = res.data.items
    },
    // 请求-目录列表数据
    async getCataLogueListFn () {
      const res = await list(this.query)
      this.formData = res.data.items
      this.counts = res.data.counts
      this.alertText = `共${this.counts}条数据`
    },
    // 将目录的数字状态转换成汉字
    getChineseStateFn (state) {
      const obj = catalogueState.catalogueState.find(item => item.id === state)
      return obj ? obj.value : '未知'
    },
    // 格式化-目录-创建日期的方法
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD hh:mm:ss')
    },
    // 每页显示的条数发生改变时触发
    handleSizeChange (size) {
      this.query.pagesize = size
      this.getCataLogueListFn()
    },
    // 当前页码发生改变时触发
    handleCurrentChange (page) {
      this.query.page = page
      this.getCataLogueListFn()
    },
    // 新增目录-按钮-点击事件
    directorysAddFn () {
      this.isEdit = false // 表示新增
      this.showDialog = true
    },
    // 新增目录(修改目录)-点击确定添加以后
    async addFn (data) {
      if (this.isEdit) {
        data.id = this.clickId
        const res = await update(data)
        console.log(res)
      } else {
        const res = await add(data)
        console.log(res)
      }
      this.getCataLogueListFn()
    },
    // 点击修改-按钮
    async edit (id) {
      this.clickId = id
      this.isEdit = true // 表示编辑
      this.showDialog = true // 显示修改弹框
      const res = await detail({ id }) // 通过当前点击的id查详细数据-目录列表
      this.$refs.DirDialog.formDate.subjectID = res.data.subjectID // 所属学科-数据回写
      this.$refs.DirDialog.formDate.directoryName = res.data.directoryName // 目录名称-数据回写
    },
    // 删除
    async catalogDelete (id) {
      const res = await remove({ id })
      console.log(res)
      this.getCataLogueListFn()
    },
    // 搜索-按钮
    async searchClick () {
      this.formData = []
      const res = await list(this.query)
      this.formData = res.data.items
    },
    // 禁用-启用-按钮切换
    forbiddenClick (data) {
      if (this.forbidden) {
        this.forbidden = false
      } else {
        this.forbidden = true
      }
    },
    // 清空搜索框数据
    empty () {
      this.query = {
        // 查询参数
        directoryName: '', // 用于搜索查询-目录名称
        page: 1, // 当前页面(页码)
        pagesize: 10, // 页面显示的条数
        state: null // 用于搜索查询-状态
      }
    }
  }
}
</script>

<style scoped>
.container {
  margin: 10px 9px;
  padding: 20px 20px;
  background-color: white;
}
/* #span_catalogue {
    margin-right: 10px;
  }
  #span_state {
    margin-right: 10px;
  } */
</style>
